<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Picture, Upload, Download, Crop, Delete, Setting } from '@element-plus/icons-vue'

const router = useRouter()

// 示例特性列表
const features = [
  {
    icon: 'picture',
    title: '智能识别',
    description: '强大的AI算法能够精准识别各类水印，无论是文字、LOGO还是复杂图案。'
  },
  {
    icon: 'magic-stick',
    title: '一键去除',
    description: '只需点击一下，即可自动去除水印，操作简单快捷，无需专业技能。'
  },
  {
    icon: 'film',
    title: '批量处理',
    description: '支持多张图片同时处理，提高工作效率，节省宝贵时间。'
  },
  {
    icon: 'picture-filled',
    title: '保留原图质量',
    description: '去除水印的同时保持原图的清晰度和质量，不会造成图片失真。'
  },
  {
    icon: 'lock',
    title: '隐私保障',
    description: '所有处理过程都在本地完成，确保您的图片不会泄露给第三方。'
  },
  {
    icon: 'discount',
    title: '免费使用',
    description: '基础功能完全免费，专业用户可享受更多高级功能。'
  }
]

// 常见问题列表
const faqs = [
  {
    question: '如何使用水印去除工具？',
    answer: '使用非常简单，只需上传图片，选择水印区域，点击"去除水印"按钮即可。系统会自动处理并让您预览和下载处理后的图片。'
  },
  {
    question: '支持哪些图片格式？',
    answer: '目前支持JPG、PNG、BMP、WEBP等常见图片格式，最大支持20MB的图片文件。'
  },
  {
    question: '处理后的图片质量如何？',
    answer: '我们采用先进的AI修复技术，能够在去除水印的同时最大程度保留原图质量，效果优于市面上大多数同类工具。'
  },
  {
    question: '是否支持批量处理图片？',
    answer: '是的，注册用户可以使用批量处理功能，一次性处理多达20张图片，大大提高工作效率。'
  }
]

// 前往工具页面
const goToTools = () => {
  router.push('/tools')
}
</script>

<template>
  <div class="home-page">
    <!-- 头部区域 -->
    <div class="header-section">
      <div class="container">
        <div class="header-content">
          <h1 class="animate-fade-up">智能图片水印工具</h1>
          <p class="animate-fade-up" style="--delay: 0.2s">快速、安全地为您的图片添加或去除水印</p>
          <div class="button-group animate-fade-up" style="--delay: 0.4s">
            <el-button type="primary" @click="router.push('/tools')" class="btn btn-primary">
              <el-icon><Picture /></el-icon>
              开始使用
            </el-button>
            <el-button @click="router.push('/about')" class="btn btn-secondary">
              了解更多
            </el-button>
          </div>
        </div>
      </div>
      <div class="header-decoration">
        <div class="decoration-dot" v-for="i in 8" :key="i" :style="{
          '--size': `${20 + Math.random() * 40}px`,
          '--top': `${Math.random() * 100}%`,
          '--left': `${Math.random() * 100}%`,
          '--delay': `${Math.random() * 2}s`
        }"></div>
      </div>
    </div>

    <!-- 功能特点 -->
    <div class="features-section" id="features">
      <div class="container">
        <h2 class="section-title">
          <span class="title-underline">核心功能</span>
        </h2>
        <div class="features-grid">
          <div class="card feature-card" v-for="(feature, index) in features" :key="index"
               :class="{'animate-card': true}" :style="{animationDelay: `${0.1 * index}s`}">
            <div class="feature-icon">
              <el-icon><component :is="feature.icon" /></el-icon>
            </div>
            <h3>{{ feature.title }}</h3>
            <p>{{ feature.description }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 使用步骤 -->
    <div class="steps-section" id="steps">
      <div class="container">
        <h2 class="section-title">
          <span class="title-underline">使用步骤</span>
        </h2>
        <div class="steps-grid">
          <div class="card guide-step animate-card" v-for="i in 4" :key="i" :style="{animationDelay: `${0.1 * i}s`}">
            <div class="step-number">{{ i }}</div>
            <h3>{{ ['上传图片', '选择功能', '设置参数', '下载结果'][i-1] }}</h3>
            <p>{{ ['选择需要处理的图片文件', '选择添加或去除水印', '调整水印样式或处理参数', '获取处理后的图片'][i-1] }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 常见问题 -->
    <div class="faq-section" id="faq">
      <div class="container">
        <h2 class="section-title">
          <span class="title-underline">常见问题</span>
        </h2>
        <div class="faq-grid">
          <div class="card faq-card animate-card" v-for="(faq, index) in faqs" :key="index" 
               :style="{animationDelay: `${0.1 * index}s`}">
            <h3>{{ faq.question }}</h3>
            <p>{{ faq.answer }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部CTA -->
    <div class="cta-section">
      <div class="container">
        <div class="card cta-card">
          <h2 class="animate-fade-up">准备好开始了吗？</h2>
          <p class="animate-fade-up" style="--delay: 0.2s">立即体验专业的图片水印处理工具</p>
          <div class="button-group animate-fade-up" style="--delay: 0.4s">
            <el-button type="primary" @click="router.push('/tools')" class="btn btn-primary">
              免费使用
            </el-button>
            <el-button @click="router.push('/pricing')" class="btn btn-secondary">
              查看价格
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.home-page {
  min-height: 100vh;
  background-color: var(--bg-color);
  display: flex;
  flex-direction: column;
}

/* 头部区域样式 */
.header-section {
  position: relative;
  background: var(--primary-gradient);
  padding: 8rem 0;
  color: white;
  overflow: hidden;
  z-index: var(--z-header);
}

.header-decoration {
  position: absolute;
  top: 45%;
  right: -100px;
  width: 300px;
  height: 300px;
  background: linear-gradient(45deg, rgba(19, 194, 194, 0.2), rgba(24, 144, 255, 0.2));
  border-radius: 50%;
  filter: blur(45px);
  z-index: -1;
}

.decoration-dot {
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  top: var(--top);
  left: var(--left);
  animation: float 6s infinite ease-in-out;
  animation-delay: var(--delay);
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(20px) scale(1.1);
  }
}

.header-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.header-content h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-content p {
  font-size: 1.25rem;
  opacity: 0.9;
  margin-bottom: 2rem;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* 区域公共样式 */
.features-section,
.steps-section,
.faq-section {
  padding: 6rem 0;
  scroll-margin-top: 80px;
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 3rem;
  position: relative;
}

.title-underline {
  position: relative;
  padding-bottom: 10px;
}

.title-underline::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: var(--primary-gradient);
  border-radius: 2px;
}

/* 功能特点样式 */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.feature-card {
  text-align: center;
  padding: 2.5rem 2rem;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  opacity: 0;
}

.feature-card:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: var(--primary-color);
  box-shadow: 0 10px 30px rgba(19, 194, 194, 0.1);
}

.feature-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  background: var(--primary-gradient);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  box-shadow: 0 5px 15px rgba(19, 194, 194, 0.3);
  transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
  transform: scale(1.1) rotate(5deg);
}

.feature-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--title-color);
}

.feature-card p {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 步骤样式 */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.guide-step {
  text-align: center;
  padding: 2.5rem 2rem;
  position: relative;
  border-radius: var(--radius-lg);
  opacity: 0;
}

.guide-step::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -30px;
  width: 60px;
  height: 2px;
  background: linear-gradient(to right, var(--primary-color), transparent);
  z-index: 1;
}

.guide-step:last-child::before {
  display: none;
}

.step-number {
  width: 60px;
  height: 60px;
  background: var(--primary-gradient);
  color: white;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 auto 1.5rem;
  box-shadow: 0 5px 15px rgba(19, 194, 194, 0.3);
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.guide-step:hover .step-number {
  transform: scale(1.1);
}

.guide-step h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--title-color);
}

.guide-step p {
  color: var(--text-secondary);
}

/* FAQ样式 */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.faq-card {
  padding: 2.5rem 2rem;
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
  opacity: 0;
}

.faq-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transform: translateY(-5px);
}

.faq-card h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--title-color);
  position: relative;
  padding-left: 2rem;
}

.faq-card h3::before {
  content: '?';
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-gradient);
  color: white;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: bold;
}

.faq-card p {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* CTA区域样式 */
.cta-section {
  padding: 6rem 0;
  background: var(--primary-gradient);
  color: white;
  position: relative;
  overflow: hidden;
}

.cta-section::before,
.cta-section::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  z-index: 1;
}

.cta-section::before {
  top: -150px;
  left: -100px;
}

.cta-section::after {
  bottom: -150px;
  right: -100px;
}

.cta-card {
  text-align: center;
  background: transparent;
  box-shadow: none;
  padding: 3rem 2rem;
  position: relative;
  z-index: 2;
}

.cta-card h2 {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cta-card p {
  font-size: 1.25rem;
  opacity: 0.9;
  margin-bottom: 2.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* 动画效果 */
.animate-fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.8s forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-card {
  animation: fadeIn 0.8s forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* 响应式优化 */
@media (max-width: 1200px) {
  .header-content h1 {
    font-size: 3rem;
  }

  .section-title {
    font-size: 2.25rem;
  }

  .cta-card h2 {
    font-size: 2.5rem;
  }
}

@media (max-width: 992px) {
  .features-section,
  .steps-section,
  .faq-section {
    padding: 5rem 0;
  }

  .feature-icon {
    width: 70px;
    height: 70px;
    font-size: 28px;
  }
  
  .guide-step::before {
    right: -20px;
    width: 40px;
  }
}

@media (max-width: 768px) {
  .header-section {
    padding: 6rem 0;
  }

  .header-content h1 {
    font-size: 2.5rem;
  }

  .features-section,
  .steps-section,
  .faq-section {
    padding: 4rem 0;
  }

  .section-title {
    font-size: 2rem;
    margin-bottom: 2.5rem;
  }

  .feature-card,
  .guide-step,
  .faq-card {
    padding: 2rem 1.5rem;
  }

  .cta-card h2 {
    font-size: 2.25rem;
  }

  .cta-card p {
    font-size: 1.1rem;
  }
  
  .guide-step::before {
    display: none;
  }
}

@media (max-width: 576px) {
  .header-section {
    padding: 5rem 0;
  }

  .header-content h1 {
    font-size: 2rem;
  }

  .header-content p {
    font-size: 1rem;
  }

  .features-section,
  .steps-section,
  .faq-section {
    padding: 3rem 0;
  }

  .section-title {
    font-size: 1.75rem;
  }

  .feature-icon {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }

  .step-number {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }

  .feature-card h3,
  .guide-step h3 {
    font-size: 1.25rem;
  }

  .cta-card h2 {
    font-size: 1.75rem;
  }

  .cta-card {
    padding: 2rem 1rem;
  }
  
  .button-group {
    flex-direction: column;
  }
}
</style> 